<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trips|Blogs</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- Navigation menu -->
    <nav class="navbar navbar-expand-sm navbar-light fixed-top">
        <a class="navbar-brand" href="./index.html"><img src="/images/logo.png" width="35" height="35" alt="logo"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <a class="nav-link" href="./index.html"><i class="fa fa-home fa-lg"></i> Home</a>
                </li>
                <li class="nav-item px-3">
                    <a class="nav-link" href="./aboutus.html" ><span class="fa fa-info fa-lg"></span> About</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#" id="current"><i class="fa fa-newspaper-o"></i> Blog</a>
                </li>
                <li class="nav-item px-2 dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plane fa-lg"></i> Trips
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">2019</a>
                        <a class="dropdown-item" href="#">2018</a>
                        <a class="dropdown-item" href="#">2017</a>
                    </div>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="./contact.html"><i class="fa fa-address-card fa-lg"></i> Contact</a>
                </li>
            </ul>
            <span class="navbar-text ml-auto">
                <a id="loginLink">
                    <span class="fa fa-sign-in"></span> Login</a>
            </span>
        </div>
    </nav>

    <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Login </h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-row">
                            <div class="form-group col-sm-4">
                                <label class="sr-only" for="exampleInputEmail3">Email address</label>
                                <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3"
                                    placeholder="Enter email">
                            </div>
                            <div class="form-group col-sm-4">
                                <label class="sr-only" for="exampleInputPassword3">Password</label>
                                <input type="password" class="form-control form-control-sm mr-1"
                                    id="exampleInputPassword3" placeholder="Password">
                            </div>
                            <div class="col-sm-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox">
                                    <label class="form-check-label"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <button type="button" class="btn btn-secondary btn-sm ml-auto"
                                data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <section id="header">
        <img src="images/about_bg.jpg" alt="Mountains">
        <h1>Blogs</h1>
    </section>

    <div class="container">
        <div class="row">
            <ol class="col-12 breadcrumb">
                <li class="breadcrumb-item"><a href="./index.html">Home</a></li>
                <li class="breadcrumb-item active">Blogs</li>
            </ol>
        </div>
        <div class="row row-content align-items-center justify-content-center">
            <div class="col-12">
                <h1 class="mb-5 text-center">Recommended for you</h1>
            </div>        
      
                <div class="col-12 col-sm-4 align-self-center mx-auto">
                    <img class="img-thumbnail" src="./images/blog1.jpg" alt="Blog">
                    <h5><a href="https://www.experiencetravelgroup.com/blog/2017/06/travel-guide-himachal-pradesh-india/">A
                            TRAVEL GUIDE TO HIMACHAL PRADESH: BEYOND SHIMLA</a></h5>
                    <p>by Amelia Curran</p>
                </div>
                <div class="col-12 col-sm-4 align-self-center">
                    <img class="img-thumbnail" src="./images/blog2.webp" alt="Blog">
                    <h5><a href="https://www.klook.com/en-IN/blog/places-to-visit-in-himachal/">PLACES TO VISIT HIMACHAL
                            PRADESH</a></h5>
                    <p>by Klook team</p>
                </div>
                <div class="col-12 col-sm-4 align-self-center">
                    <img class="img-thumbnail" src="./images/blog3.jpg" alt="Blog">
                    <h5><a href="https://www.urbantravelblog.com/info/himachal-pradesh-india/">AN OVERVIEW OF MAGICAL
                            HIMACHAL PRADESH</a></h5>
                    <p>by Urban Travel Blog</p>
                </div>
            </div>
        </div>

        <section id="banner" class="mb-0">
            <h1 id="heading">Don't miss the opportunity to enjoy a 10-day stay at the lowest prices</h1>
            <a class="btn btn-light" href="./contact.html" role="button">Contact Us today</a>
        </section>
    
        <footer class="footer">
        <div class="container">
            <div class="row row-content">
                <div class="offset-1 col-4 col-sm-2">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#">Home</a></li>
                        <li><a href="./aboutus.html">About</a></li>
                        <li><a href="./blog.html">Blogs</a></li>
                        <li><a href="#">Trips</a></li>
                        <li><a href="./contact.html">Contact</a></li>
                    </ul>
                </div>
                <div class="col-7 col-sm-5">
                    <h5>Our Address</h5>
                    <address>
                        121, Clear Water Bay Road<br>
                        Clear Water Bay, Kowloon<br>
                        Himachal Pradesh, India<br>
                        <i class="fa fa-phone fa-lg"></i> : +852 1234 5678<br>
                        <i class="fa fa-fax fa-lg"></i> : +852 8765 4321<br>
                        <i class="fa fa-envelope fa-lg"></i> : <a href="mailto:confusion@food.net">confusion@food.net</a>
                    </address>
                </div>
                <div class="col-12 col-sm-4 align-self-center">
                    <div class="text-center">
                        <a class="btn btn-social-icon btn-google" href="http://google.com/+"><i
                                class="fa fa-google-plus fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i
                                class="fa fa-facebook fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
                                class="fa fa-linkedin fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i
                                class="fa fa-twitter fa-lg"></i></a>
                        <a class="btn btn-social-icon btn-google" href="http://youtube.com/"><i
                                class="fa fa-youtube fa-lg"></i></a>
                        <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-auto">
                    <p>© Copyright 2018 Trips | Himachal Pradesh</p>
                </div>
            </div>
        </div>
        </footer>
    
       <!-- jQuery first, then Popper.js, then Bootstrap JS. -->
        <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
        <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <script>
            $('#loginLink').click(function(){
                $('#loginModal').modal('show');
            });
        </script>
    </body>
    
    </html>
        </div>